<template>
	<div class="weui-grids">
		<div class="weui-grid js_grid pr" v-for="item in previewList">
			<p class="weui-grid__label weui-uploader__file" @touchstart="previewImage(item.url)" :style="'background-image:url('+ item.url+')'"></p>
			<i class="pa weui-icon-cancel my-del-icon" @touchstart="del($event,item)"></i>
		</div>
		<div class="weui-grid js_grid" v-if="previewList.length<max">
			<p class="weui-grid__label">
				<li class="weui-uploader__file weui-uploader__input-box">
					<input v-if="type=='image'" id="uploaderImage" class="weui-uploader__input" type="file" accept="image/*" multiple
					 @change="upload" />
					<input v-if="type=='video'" id="uploaderVideo" class="weui-uploader__input" type="file" accept="video/*" @change="upload" />
				</li>
		</div>
	</div>
</template>

<script>
	import wx from "weixin-js-sdk";
	import $ from 'jquery';

	export default {
		props: {
			type: {
				type: String,
				default: 'image'
			},
			max: {
				type: Number,
				default: 9
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				previewList: [],
				cos: null,
				options: {
					bucket: '',
					region: '',
					folder: '',
					domain: '',
				},
			}
		},
		methods: {
			getUpList() {
				return this.previewList;
			},
			clearList() {
				this.previewList = [];
			},
			previewImage(url) {
				wx.previewImage({
					previewImage: url,
					urls: [url]
				})
			},
			del(e, item) {
				e.preventDefault();
				this.$http.deleteFile({
					fileName: item.fileName
				}).then(resp => {
					let list = this.previewList;
					this.previewList.splice(list.indexOf(item), 1);
				})
			},
			upload: function(e) {
				let files = e.target.files || e.dataTransfer.files;
				if (!files.length) return;
				this.$toast.show('上传中...', 'loading');
				for (let f = 0; f < files.length; f++) {
					let file = files[f];
					let formData = new FormData();
					formData.append('file', file);
					let fileName = this.uuid() + '.jpg';
					formData.append('key', fileName);
					formData.append("token", this.options.token);
					let that = this;
					$.ajax({
						url: this.options.uploadServer,
						type: 'post',
						data: formData,
						processData: false,
						contentType: false,
						success: function(resp) {
							let data = {
								fileName: fileName,
								url: that.options.domain + fileName,
								type: file.type,
							};
							that.previewList.push(data);
						},
						error: function(resp) {
							that.$weui.toast('上传失败');
						},
						complete: function() {
							that.$toast.hide();
						}
					})
				}

			},
			uuid() {
				let date = new Date();

				function S4() {
					return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
				}
				return (date.getFullYear() + "" + (date.getMonth() + 1) + S4() + S4() + S4() + S4() + S4() + S4());
			},
			getCosCredential() {
				this.$http.getCosCredential().then(resp => {
					this.options = resp.data;
				});
			}
		},
		mounted() {
			this.getCosCredential();
		},
		created() {
			this.previewList = this.list;
		}
	}
</script>

<style scoped>
	.weui-grid {
		padding: 0;
		border: 0;
	}

	.weui-uploader__file {
		width: 98% !important;
		height: 10rem;
		margin: 1%;
	}

	.weui-grids:before,
	.weui-grids:after,
	.weui-grid:before,
	.weui-grid:after {
		height: 0;
		border: 0;
		width: 0;
	}

	.weui-uploader__input-box {
		background: #eff1f5;
	}

	.weui-uploader__input-box:before {
		width: 7px;
		height: 40px;
		color: #D0D0D0;
	}

	.weui-uploader__input-box::after {
		height: 7px;
		width: 40px;
		color: #D0D0D0;
	}
</style>
